
<template>
	<div>
		<div style="display: none">
			<ParamDefine :params="{}" ref="left"></ParamDefine>
		</div>

		<a-row class="mb-2">
			<a-col span="12"> </a-col>
			<a-col span="3">
				<a-button type="primary" @click="addCondition">新增</a-button>
			</a-col>
			<a-col span="2">
				<a-button @click="removeCondition">删除</a-button>
			</a-col>
			<a-col span="2"> </a-col>
			<a-col span="4">
				<a-select
					v-if="props.config"
					v-model:value="props.config.viewTypeCode"
					@change="viewTypeChange"
					style="width: 100%"
				>
					<a-select-option value="struct">struct</a-select-option>
					<a-select-option value="raw">raw</a-select-option>
				</a-select>
			</a-col>
		</a-row>
		<a-row>
			<a-col span="24">
				<Table
					v-if="props.config?.viewTypeCode == 'struct'"
					stripe
					border
					:height="props.height"
					highlight-row
					@on-current-change="currentChange"
					@on-cell-click="cellClick"
					:columns="conditionColumns"
					:data="props.config.struct"
				>
					<template #fieldCode="{ row }">
						<a-input v-model:value="row.fieldCode" @change="valueChange(row, 'fieldCode')"></a-input>
					</template>

					<template #relationalOperator="{ row }">
						<span>=</span>
					</template>

					<template #rightValue="{ row }">
						<TreeSelect
							v-if="!row.rightValueConstantFlag"
							v-model="row.rightValue"
							:on-change="valueChange(row, 'rightValue')"
							:data="treeValueList"
							v-width="90"
						/>

						<Input
							v-if="row.rightValueConstantFlag"
							@on-change="valueChange(row, 'rightValue')"
							style="width: 90px"
							v-model="row.rightValue"
							placeholder="请输入值"
						/>

						&nbsp;
						<Checkbox
							v-model="row.rightValueConstantFlag"
							@on-change="valueChange(row, 'rightValueConstantFlag')"
							label=""
							>常量</Checkbox
						>
					</template>
				</Table>

				<a-textarea v-if="props.config?.viewTypeCode == 'raw'" v-model:value="props.config.raw"></a-textarea>
			</a-col>
		</a-row>
	</div>
</template>
<script setup>
import { onMounted, ref, watch, toRaw, inject, getCurrentInstance } from 'vue'
import { nanoid } from 'nanoid'
import ParamDefine from '@/views/restapi/ParamDefine.vue'

const props = defineProps(['values', 'config', 'height', 'rawEndOfEnterFlag'])
const left = ref()

watch(
	() => props.values,
	(newValue, oldValue) => {
		transferTreePrev()
	}
)

const transferTreePrev = () => {
	const cb = left.value.repairJson(props.values)
	transferTree(cb.params)
	treeValueList.value = cb.params
}
onMounted(() => {
	transferTreePrev()
})
const transferTree = (list) => {
	for (let i = 0; i < list.length; i++) {
		const data = list[i]
		data.title = data.fieldName
		data.expand = false
		data.value = data.jsonPath
		data.selected = false
		data.checked = false

		if (data.children) {
			transferTree(data.children)
		}
	}
}

const viewTypeChange = () => {
	if (props.config.viewTypeCode == 'raw') {
		if (!props.config.struct) {
			return
		}
		let str = ''
		for (let i = 0; i < props.config.struct.length; i++) {
			let b = props.config.struct[i]
			str +=
				b.fieldCode +
				'=' +
				b.rightValue +
				(i == props.config.struct.length - 1
					? props.rawEndOfEnterFlag
						? props.config.splitOperator
						: ''
					: props.config.splitOperator) +
				(props.rawEndOfEnterFlag ? '\n' : '')
		}
		props.config.raw = str
	} else {
		let bs = props.config.raw.split(props.config.splitOperator)
		props.config.struct = []

		for (let c of bs) {
			const id = nanoid(5)
			let val = c.split('=')
			if (!val[0]||val[0]=='\n') {
				continue
			}
			props.config.struct.push({
				id: id,
				fieldCode: val[0],
				relationalOperator: '=',
				rightValueConstantFlag: true,
				rightValue: val[1]
			})
		}
	}
}

const treeValueList = ref([])

const conditionColumns = ref([
	{
		title: '字段',
		key: 'fieldCode',
		slot: 'fieldCode'
	},
	{
		title: '#',
		key: 'relationalOperator',
		slot: 'relationalOperator',
		width: 50
	},
	{
		title: '值',
		key: 'rightValue',
		slot: 'rightValue'
	}
])

const valueChange = (row, key) => {
	for (const c of props.config.struct) {
		if (c.id == row.id) {
			c[key] = row[key]
		}
	}
}

const addCondition = () => {
	const id = nanoid(5)
	props.config.struct.push({
		id: id,
		fieldCode: null,
		relationalOperator: '=',
		rightValueConstantFlag: false,
		rightValue: null
	})
}

const cellClick = (row, column, data, event) => {
	//这里需要
	row[column.key + 'EditorFlag'] = true
}

const removeCondition = () => {
	if (!currentRow.value) {
		return
	}
	var i = 0
	for (const c of props.config.struct) {
		if (c.id == currentRow.value.id) {
			props.config.struct.splice(i, 1)
		}
		i++
	}
}

const currentRow = ref()
const currentChange = (cr, oldCurrentRow) => {
	currentRow.value = cr
}
</script>


<style scoped></style>
